<template>
  <el-dialog v-if="openForm" v-model="openBoole" :close-on-click-modal="false" title="作废商业营销要素" custom-class="mydialog"
    width="50%" @close="close">
    <el-form ref="openRef" :model="openForm" :rules="rules" label-width="140px" size="small">
      <el-row gutter="40">
        <el-col :span="12">
          <el-form-item label="负责营销职员：">
            {{openForm?.headName}}
          </el-form-item>
        </el-col>
<!--        <el-col :span="12">-->
<!--          <el-form-item label="关联营销任务：">-->
<!--            {{ openForm?.planInfo?.planName}}-->
<!--          </el-form-item>-->
<!--        </el-col>-->

        <el-col :span="12">
          <el-form-item label="商销客户名称：">
            {{openForm?.sellerDetail?.sellerName}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品通用名：">
            {{openForm?.productInfoDetail?.productPopularName}}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商品名：">
            {{openForm?.productInfoDetail?.productName}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="包装规格：">
            {{openForm?.productInfoDetail?.packSpecs}}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="生产厂家：">
            {{openForm?.productInfoDetail?.producer}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交易价：">
            {{openForm?.tradePrice}}
            <span v-if="openForm?.productInfoDetail?.sellUnit">
              元 /{{ getLabel('sell_unit', openForm?.productInfoDetail?.sellUnit) }}
            </span>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="其他约定：">
            {{openForm?.remark}}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="作废原因：" prop="banReason">
            <el-input type="textarea" :rows="2" v-model="openForm.banReason" placeholder="请输入作废原因" />
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer" style="display:flex;justify-content:center;align-items:center;">
        <el-button class="border-btn" size="small" style="margin-right: 20px;" @click="close">取消
        </el-button>
        <el-button class="main-btn" size="small" type="primary" @click="handlSubmit">提交审核
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import {
  getCurrentInstance,
  inject,
  nextTick,
  reactive,
  ref,
  toRefs,
} from "vue";
export default {
  setup(props, context) {
    const api = inject("api");
    const currentInstance = getCurrentInstance();
    const data = reactive({
      openBoole: false,
      openForm: {},
      openRef: null,
      rules:{
         banReason: [
          { required: true, message: "请输入作废原因", trigger: "blur" },
        ],
      }
    });

    const close = () => {
      data.openBoole = false;
      data.openRef.clearValidate();
      data.openRef.resetFields();
    };

    const open = (row) => {
      data.openForm = row;
      data.openForm.banReason = "";
      data.openBoole = true;
    };

    const handlSubmit = () => {
      data.openRef.validate((valid) => {
        if (valid) {
          api.businessAgreement
            .BUSINESSAGREEMENT_BAN(data.openForm.id, data.openForm.banReason)
            .then((res) => {
              if (res.code === 0) {
                currentInstance.proxy.customMessage({
                  type: "success",
                  message: "作废成功",
                });
                context.emit("succsessBan");
                close();
              } else {
                currentInstance.proxy.customMessage({
                  type: "error",
                  message: res.msg,
                });
              }
            });
        }
      });
    };

    return {
      ...toRefs(data),
      close,
      open,
      handlSubmit,
    };
  },
};
</script>
